@charset "utf-8";
$bluecolor:#2395cb;
$whitecolor:#f6f6f6;
$blackfontcolor:#272727;
$greencolor:#3ed1a4;
$purplecolor:#895ea3;
$weakwhite:#f6f6f6;
@mixin basic($wid,$hei,$bgcolor){
    width: $wid;
    height: $hei;
    background: $bgcolor;
}

@mixin secondbasic($wid,$hei,$mar){
    width: $wid;
    height: $hei;
    margin: $mar;
}

header{
    width: 100%;
    background: white;
    nav{
        width: 995px;
        height: 96px;
        margin: 0 auto;
                
        .logo{
            display: inline-block;
            width: 300px;
            height: 96px;
            img{
                width: 100%;
            }
         }
    ul{
        width: 600px;
        font-size: 0;
        li.active{
            background: #faf8f8;
            border-bottom: 3px solid $bluecolor;
        }
        li{
            display: inline-block;
            width: 85px;
            height: 93px;
            padding-top: 28px;
            text-align: center;
            box-sizing: border-box;
            font-size: 14px;
            font-weight: bold;
            color: #000000;
            a{
                color: #000000;
            }
        }
        li:hover{
            background: #faf8f8;
            border-bottom: 3px solid $bluecolor;
        }
    }
}
            .top{
                background: #dfdfde;
                height: 40px;
                line-height: 40px;
                .main{
                    width: 995px;
                    margin: 0 auto;
                    a{
                        color: #000000;
                        font-size: 14px;
                        margin-left: 25px;
                    }
                }
            }
        }
        

  footer{
       width: 100%;
       height: 137px;
       background: $bluecolor;
      .footer-top{ 
          width: 100%;
          height: 102px;
          font-size: 13px;
          .top{
           width: 196px;
           height: 20px;
           margin: 0 auto;
           font-size: 13px;
           padding-top: 27px;
           span{
               line-height: 13px;
               color: #faf9f9;
           }
           
           span:first-child{
               margin-right: 18px;
               line-height: 18px;
           }
           
           span:last-child{
               width: 68px;
               height: 20px;
               margin-left: 20px;
               
           }
       }
       ul{
           width: 406px;
           height: 13px;
           font-size: 13px;
           margin: 26px auto 23px;
           text-align: center;        
           li{
               display: inline-block;
               color: #faf9f9;
               a{
                   color: #faf9f9;
               }
           }
       }
       
       }
       
       .footer-bottom{
           width: 100%;
           height: 35px;
           background: #1c1b29;
           p{
               width: 489px;
               height: 13px;
               font-size: 13px;
               text-align: center;
               color: #faf9f9;
               margin: 0 auto;
               line-height: 35px

            }
        }
     
    }



.product-banner{
    width: 100%;
    height: 222px;
    padding-bottom: 39px;
    img{
        width: 100%;
    }
}

.product-nav{
    @include secondbasic(950px,197px,0 auto);
    .nav-top{
     @include secondbasic(970px,68px,0 auto);
     span{
         display: inline-block;
         width: 105px;
         height: 13px;
         font-size: 13px;
         padding-top: 21px;         
         a{
             color: #626262;
         }
     }  
    }
    ul{
      @include secondbasic(970px,129px,0 0 0 -10px);
      font-size: 0;
      li{
          display: inline-block;
          font-size: 23px;
          width: 292px;
          height: 129px;
          background: #cac9c9;
          text-align: center;
          line-height: 129px;
          a{
              display: inline-block;
              color: #434343;
          }
      }
      li:first-child{
          background: #2072f9;
          position: relative;
          span{
              width: 29px;
              height: 29px;
              position: absolute;
              display: inline-block;
              background: url(../img/direction.png);
              left: 50%;
              margin-left: -14.5px;
              bottom: 13px;    
          }
      } 
      
    
      
      li:nth-of-type(2){
          width: 206px;
          height: 129px;
          margin-left: 6px;
      }
      li:nth-of-type(3){
          width: 233px;
          height: 129px;
          margin-left: 6px;    
      } 
       li:nth-of-type(4){
          width: 211px;
          height: 129px; 
          margin-left: 6px;        
      } 
    }
}


.section-top{
    @include secondbasic(968px,105px,0 auto);
    .search-box{
        border: 1px solid #434343;
        border-right: none;
        float: right;
        @include secondbasic(359px,48px,29px 10px 0 0);
        input[type="text"]{
            width: 299px;
            height: 48px;
            line-height: 48px;
            float: left;
            border: 0;
            text-indent: 6px;
        }
        input[type="image"]{
            width: 56px;
            height: 49px; 
            float: right;         
        }
    }
}


.section-bottom{
    @include secondbasic(969px,804px,26px auto 0);
    table{
      @include secondbasic(969px,804px,0 0 0 -10px);
      border: 1px solid #dcdcdc;
      td{
         border: 1px solid #dcdcdc;
         width: 318px;
         height: 266px;
         .imgwrap{
             width: 177px;
             height: 188px;
             text-align: center;
             margin: 0 auto;
             a{
                 img{
                 width: 100%;
                }
             }
         }
         .word{
             width: 318px;
             height: 84px;
             h5{
                 width: 101px;
                 height: 14px;
                 font-size: 14px;
                 margin: 0 auto;
                 text-align: center;
                 a{
                     color: #2072F9;
                 }
             }
             p{
                 width:  311px;
                 height: 13px;
                 margin: 0 auto;
                 font-size: 13px;
                 text-align: center;
                 margin-top: 13px;
                 a{
                     color: black;
                 }
             }
         }
      }
      
    }
}


.product-turnpage{
    width: 584px;
    height: 48px;
    font-size: 0;
    margin: 54px auto 254px auto;
    li:first-child,li:last-child{
        width: 112px;
        height: 48px;
    }
    
    li{
        width: 60px;
        height: 48px;
        display: inline-block;
        font-size: 16px;
        line-height: 48px;
        text-align: center;
        a{
            color: #6b6a6a;
        }
    }
    
    li.active,li:hover{
        background: #2072f9;
        a{
            color: white;
        }
    }
}
